<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        #output {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>WebSocket Client</h1>
    <input type="text" id="input" placeholder="Enter message" />
    <button id="sendButton">Send</button>
    <div id="output"></div>

    <script>
        var output = document.getElementById("output");
        var input = document.getElementById("input");
        var sendButton = document.getElementById("sendButton");
        var ws = new WebSocket("ws://localhost:8080/ws");

        ws.onopen = function(event) {
            output.innerHTML += "Connected to WebSocket server<br>";
        };

        ws.onmessage = function(event) {
            output.innerHTML += "Received message: " + event.data + "<br>";
        };

        ws.onclose = function(event) {
            output.innerHTML += "Disconnected from WebSocket server<br>";
        };

        ws.onerror = function(event) {
            output.innerHTML += "WebSocket error: " + event.data + "<br>";
        };

        sendButton.addEventListener("click", function() {
            var message = input.value;
            ws.send(message);
            output.innerHTML += "Sent message: " + message + "<br>";
            input.value = "";
        });
    </script>
</body>
</html>
